<template>
	<div class="perfChart">
		<group class="perfChartGroup">
			<div style="margin-top: 10px">
				<span style="font-weight: bold; font-size: 16px; padding-left: 5px">{{chartTitle}}</span>
				<div class="subTitle">
					<span>月份：</span><span style="color: darkred">{{curYYMM}}</span>
					<span style="padding-left: 15px;">总课时：</span><span style="color: darkred">{{totalLessons}}个</span>
					<span style="padding-left: 15px;">总课消：</span><span style="color: darkred">{{totalPoints}}个</span>
					<span style="padding-left: 15px;">排名：</span><span style="color: darkred"><span v-if="rank == ''">没有名次</span><span v-else>第{{rank}}名</span></span>
				</div>
			</div>

			<v-chart ref="demo" :data="data">
				<v-scale x field="name" />
				<v-scale y field="value" />
				<v-bar series-field="type" :colors="['#1296db','#c3fe31']" :adjust="{
        type: 'dodge',
        marginRatio: 0.05 // 设置分组间柱子的间距
        }" />
				<v-tooltip show-value-in-legend />
			</v-chart>
		</group>
	</div>
</template>

<script>
	import { Group, VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'
	import NetWorking from '../../../../utils/networking'
	import dateutils from '@/utils/date'

	export default {
		name: "perf-chart",
		components: {
			Group,
			VChart,
			VLine,
			VArea,
			VTooltip,
			VLegend,
			VBar,
			XButton,
			VScale
		},
		data () {
			return {
				itemList: [],
				itemListTmp: [],
				chartTitle: '本月课消',
				curYYMM: '',
				totalLessons: 0,
				totalPoints: 0,
				rank: '',
				data: [
					{ type: '', name: '', value: 0 }
				]
			}
		},
		created: function () {
			this.curYYMM = dateutils.getYYMM(new Date())
			let date = dateutils.getDate(new Date())

			let _this = this
			NetWorking.doGet(
				'ai/getUserActivityRank',
				null,
				{
					params: {
						status: 2,
						type: 'S_LOV_LESSON',
						date: date
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.itemList = rs.totalNumberList
						_this.itemListTmp = rs.numberList

						if(_this.itemList.length > 0) {
							_this.data = []

							for(let i=0; i<_this.itemList.length; i++){
								_this.data.push({
									type: '总课消',
									name: _this.itemList[i].name.substring(0,3),
									value: _this.itemList[i].value
								})

								for(let j=0; j<_this.itemListTmp.length; j++){
									if(_this.itemListTmp[j].id == _this.itemList[i].id){
										_this.data.push({
											type: '总课时',
											name: _this.itemListTmp[j].name.substring(0,3),
											value: _this.itemListTmp[j].value
										})
									}
								}
							}
						}
					}else{
						alert(rs.error_message)
					}
				}
			)
			/*NetWorking.doGet(
				'ai/getTeacherCompleteLessonNumber',
				null,
				{
					params: {
						type: 2,
						date: date
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.itemList = rs.teacher_rank_list

						let user = this.$store.state.user.userModel.sysUser

						if(_this.itemList.length > 0){
							_this.data = []

							for(let i=0; i<_this.itemList.length; i++){
								if(user.nickname.substring(0,3) == _this.itemList[i].nickname.substring(0,3)){
									_this.totalLessons = _this.itemList[i].totalLessons
									_this.totalPoints = _this.itemList[i].totalPoints
									_this.rank = i + 1
								}

								_this.data.push({
									type: '1V1',
									name: _this.itemList[i].nickname.substring(0,3),
									value: _this.itemList[i].oneOnOne
								})
								_this.data.push({
									type: '1V2',
									name: _this.itemList[i].nickname.substring(0,3),
									value: _this.itemList[i].oneOnTwo
								})
								_this.data.push({
									type: '1V3',
									name: _this.itemList[i].nickname.substring(0,3),
									value: _this.itemList[i].oneOnThree
								})
							}
						}
					}else{
						alert(rs.error_message)
					}
				}
			)*/
		}
	}
</script>

<style>
	.subTitle {
		padding-left: 5px;
		padding-top: 10px;
		font-size: 10px;
	}

	.perfChartGroup {
		margin-bottom: 10px;
	}

	.perfChartGroup > .weui-cells {
		margin-top: 0em !important;
	}
</style>

